<template>
    <div class="Attendance">
        <!--        卡片-->
        <el-card class="box-card">
                <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
                <div class="block" style="width:100%;height: 50px">
                    <el-date-picker
                            v-model="value1"
                            type="date"
                            placeholder="选择日期"
                            format="yyyy 年 MM 月 dd 日"
                            @change="initData"
                            value-format="timestamp">
                    </el-date-picker>
                </div>
                <div id="main1" style="width:100%;height: 300px"></div>
        </el-card>
        <el-card class="box-card" style="width:100%;height: 400px">
            <div class="block" style="width:100%;height: 50px">
                <el-date-picker
                        v-model="value2"
                        type="date"
                        placeholder="选择日期"
                        format="yyyy 年 MM 月 dd 日"
                        @change="test"
                        value-format="timestamp">
                </el-date-picker>
                <el-select v-model="name" placeholder="请选择" clearable>
                    <el-option
                            v-for="item in buildingList"
                            :key="item.id"
                            :label="item.lable"
                            :value="item.id"
                            @change="test"
                    >
                    </el-option>
                </el-select>
            </div>

            <div id="test" style="width:100%;height: 300px"></div>
        </el-card>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                msg: 'Welcome to Your Vue.js App',
                value1: '',
                value2: '',
                name: '软件学院',
                //选择框
                buildingList: [
                    {
                        id: '软件学院',
                        lable: '软件学院'
                    },
                    {
                        id: '土木学院',
                        lable: '土木学院'
                    },
                    {
                        id: '电子信息学院',
                        lable: '电子信息学院'
                    },
                    {
                        id: '管理学院',
                        lable: '管理学院'
                    },
                    {
                        id: '计算机与物联网学院',
                        lable: '计算机与物联网学院'
                    }
                ],
            }
        },
        mounted(){
            this.initData();
            this.test()
        },
        methods: {
           async initData() {
                if(this.value1 == ''){
                    //获取当前时间
                    var nowDate = new Date();
                    var year= nowDate.getFullYear();
                    var month = nowDate.getMonth()+1;
                    var today = nowDate.getDate();

                    if(month >= 1 && month <=9){
                        month = "0" + month;
                    }
                    if(today >= 1 && today <=9){
                        today = "0" + today;
                    }
                    var currentdate = year + "-" + month + "-" + today;

                    var currentDateLong = new Date(currentdate.replace(new RegExp("-","gm"),"/")).getTime()     //当前时间转换成long型
                    this.value1 = currentDateLong
                }
                const {data: res} = await this.$http.get('Sign/getAllIne',{
                    params: {
                        time: this.value1
                    }
                })
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('main1'));
                let sa = []
               for (let st in res.data) {
                   for (var key in res.data[st]) {
                       if(key == 'name') {
                           sa.push(res.data[st][key])
                       }
                   }
               }
                // 绘制图表
                myChart.setOption({
                    title : {
                        text: '院系统计',//主标题
                        subtext: '纯属虚构',//副标题
                        x:'center',//x轴方向对齐方式
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        bottom: 'bottom',
                        // data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
                        data: sa
                    },
                    series : [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius : '55%',
                            center: ['50%', '60%'],
                            data: res.data,
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                });
            },
            test: async function () {
                if(this.value2 == ''){
                    //获取当前时间
                    var nowDate = new Date();
                    var year= nowDate.getFullYear();
                    var month = nowDate.getMonth()+1;
                    var today = nowDate.getDate();

                    if(month >= 1 && month <=9){
                        month = "0" + month;
                    }
                    if(today >= 1 && today <=9){
                        today = "0" + today;
                    }
                    var currentdate = year + "-" + month + "-" + today;

                    var currentDateLong = new Date(currentdate.replace(new RegExp("-","gm"),"/")).getTime()     //当前时间转换成long型
                    this.value2 = currentDateLong
                }
                const {data: res} = await this.$http.get('Sign/getAllclassSign',{
                    params: {
                        time: this.value2
                    }
                })
                console.log(res)
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('test'));
                let sa = []
                let src = {}
                let code = 0
                for (let st in res.data) {
                    for (var key in res.data[st]) {
                        if(key == 'name') {
                            if (res.data[st][key] == this.name) {
                                sa.push(res.data[st][key])
                                code = 1
                            }
                        }
                        if(key == 'list' && code == 1) {
                            src = res.data[st][key]
                        }
                    }
                }
                console.log(src)
                // 绘制图表
                myChart.setOption({
                    title : {
                        text: '班级统计',//主标题
                        subtext: this.name,//副标题
                        x:'center',//x轴方向对齐方式
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        bottom: 'bottom',
                        // data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
                        data: sa
                    },
                    series : [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius : '55%',
                            center: ['50%', '60%'],
                            data: src,
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                });
            },
        }


    }
</script>

<style scoped>

</style>